<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站积分兑换页面集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #6B7280;
      --light: #F9FAFB;
      --dark: #1F2937;
      --white: #FFFFFF;
      --success: #10B981;
      --danger: #EF4444;
      --border: #E5E7EB;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      
      /* 不同风格主题色 */
      --style1: #3B82F6; /* 科技蓝 */
      --style2: #EC4899; /* 时尚粉 */
      --style3: #6366F1; /* 商务紫 */
      --style4: #0EA5E9; /* 清新蓝 */
      --style5: #84CC16; /* 活力绿 */
      --style6: #1F2937; /* 暗黑灰 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      transition: background-color 0.3s ease;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      transition: background-color 0.3s ease;
    }
    
    /* 主页面容器 */
    .exchange-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .exchange-page.active {
      display: flex;
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 顶部导航栏 */
    .page-header {
      padding: 18px 20px;
      position: relative;
      text-align: center;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
      transition: all 0.3s ease;
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-back {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    
    .header-actions {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 18px;
      cursor: pointer;
      margin-left: 15px;
      transition: color 0.3s ease;
    }
    
    /* 积分信息 */
    .points-info {
      padding: 15px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--light);
      transition: background-color 0.3s ease;
    }
    
    .points-balance {
      display: flex;
      flex-direction: column;
    }
    
    .points-label {
      font-size: 13px;
      color: var(--secondary);
    }
    
    .points-amount {
      font-size: 20px;
      font-weight: 700;
      color: var(--primary);
    }
    
    .recharge-link {
      color: var(--primary);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      display: flex;
      align-items: center;
    }
    
    .recharge-link i {
      margin-left: 5px;
      font-size: 12px;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 12px 20px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 12px 15px 12px 40px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 14px;
      background-color: var(--light);
      color: var(--dark);
      box-sizing: border-box;
    }
    
    .search-icon {
      position: absolute;
      left: 35px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--secondary);
      font-size: 16px;
    }
    
    /* 分类标签 */
    .tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    .tabs::-webkit-scrollbar {
      display: none;
    }
    
    .tab-item {
      padding: 15px 20px;
      font-size: 15px;
      font-weight: 500;
      color: var(--secondary);
      white-space: nowrap;
      cursor: pointer;
      position: relative;
    }
    
    .tab-item.active {
      color: var(--primary);
    }
    
    .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px 3px 0 0;
    }
    
    /* 商品列表 */
    .goods-list {
      padding: 15px;
      flex-grow: 1;
      overflow-y: auto;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 15px 0 10px;
      padding-left: 5px;
    }
    
    .goods-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }
    
    .goods-item {
      background-color: var(--white);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }
    
    .goods-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }
    
    .goods-image {
      width: 100%;
      height: 120px;
      object-fit: cover;
    }
    
    .goods-info {
      padding: 12px;
    }
    
    .goods-name {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 36px;
    }
    
    .goods-points {
      color: var(--primary);
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 8px;
    }
    
    .exchange-btn {
      width: 100%;
      padding: 6px 0;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .exchange-btn:hover {
      background-color: rgba(59, 130, 246, 0.9);
    }
    
    .exchange-btn.disabled {
      background-color: var(--secondary);
      cursor: not-allowed;
    }
    
    .tag {
      position: absolute;
      top: 8px;
      left: 8px;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      color: white;
    }
    
    .tag.hot {
      background-color: var(--danger);
    }
    
    .tag.new {
      background-color: var(--success);
    }
    
    .tag.limited {
      background-color: var(--primary);
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: var(--secondary);
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      opacity: 0.3;
    }
    
    .empty-text {
      font-size: 16px;
      margin-bottom: 20px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
      transition: all 0.3s ease;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：科技蓝 */
    .style-1 {
      --primary: var(--style1);
    }
    
    .style-1 .points-info {
      background: linear-gradient(90deg, #EFF6FF, #DBEAFE);
    }
    
    .style-1 .goods-item {
      border: 1px solid #E0E7FF;
      box-shadow: none;
    }
    
    .style-1 .goods-item:hover {
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }
    
    /* 风格2：时尚粉 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .page-header {
      background-color: var(--primary);
      color: white;
      border-bottom: none;
    }
    
    .style-2 .header-back,
    .style-2 .header-btn {
      color: white;
    }
    
    .style-2 .points-info {
      background-color: #FFF5F7;
    }
    
    .style-2 .goods-item {
      border-radius: 18px;
    }
    
    .style-2 .goods-image {
      border-radius: 18px 18px 0 0;
    }
    
    .style-2 .exchange-btn {
      border-radius: 20px;
      padding: 8px 0;
    }
    
    /* 风格3：商务紫 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .container {
      background-color: #FAF5FF;
    }
    
    .style-3 .goods-item {
      background-color: white;
      border: 1px solid #EDE9FE;
    }
    
    .style-3 .points-info {
      background-color: white;
      border-bottom: 1px solid #EDE9FE;
    }
    
    .style-3 .tabs {
      background-color: transparent;
      border-bottom: none;
      padding: 10px 15px;
    }
    
    .style-3 .tab-item {
      background-color: white;
      margin-right: 8px;
      border-radius: 20px;
      padding: 8px 18px;
      font-size: 14px;
    }
    
    /* 风格4：清新蓝 */
    .style-4 {
      --primary: var(--style4);
    }
    
    .style-4 .goods-grid {
      gap: 10px;
    }
    
    .style-4 .goods-item {
      border-radius: 8px;
      box-shadow: none;
      border: 1px solid #DBEAFE;
    }
    
    .style-4 .goods-info {
      padding: 10px;
    }
    
    .style-4 .points-info {
      background-color: white;
      border-bottom: 1px solid #DBEAFE;
    }
    
    .style-4 .search-input {
      background-color: white;
      border: 1px solid #DBEAFE;
    }
    
    /* 风格5：活力绿 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .goods-list {
      background-color: #F7FDFA;
    }
    
    .style-5 .goods-item {
      background-color: white;
      border-radius: 10px;
    }
    
    .style-5 .points-info {
      background-color: #ECFDF5;
    }
    
    .style-5 .section-title {
      display: flex;
      align-items: center;
    }
    
    .style-5 .section-title::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 16px;
      background-color: var(--primary);
      border-radius: 2px;
      margin-right: 8px;
    }
    
    .style-5 .exchange-btn {
      background-color: #F0FDF4;
      color: var(--primary);
      border: 1px solid var(--primary);
    }
    
    .style-5 .exchange-btn:hover {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格6：暗黑灰 */
    .style-6 {
      --primary: #60A5FA;
      --secondary: #9CA3AF;
      --light: #1F2937;
      --dark: #F9FAFB;
      --white: #111827;
      --border: #374151;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    .style-6 body {
      background-color: #030712;
    }
    
    .style-6 .container {
      background-color: var(--white);
    }
    
    .style-6 .page-header {
      background-color: var(--light);
      border-bottom-color: var(--border);
    }
    
    .style-6 .header-back,
    .style-6 .header-btn,
    .style-6 .page-title {
      color: var(--dark);
    }
    
    .style-6 .points-info {
      background-color: var(--light);
    }
    
    .style-6 .search-input {
      background-color: var(--light);
      border-color: var(--border);
      color: var(--dark);
    }
    
    .style-6 .tabs {
      background-color: var(--light);
      border-bottom-color: var(--border);
    }
    
    .style-6 .goods-item {
      background-color: var(--light);
      box-shadow: none;
      border: 1px solid var(--border);
    }
    
    .style-6 .style-switcher {
      background-color: var(--light);
    }
    
    .style-6 .switcher-header {
      border-bottom-color: var(--border);
      color: var(--dark);
    }
    
    .style-6 .switcher-option {
      color: var(--dark);
    }
    
    .style-6 .switcher-option:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 加载更多 */
    .load-more {
      padding: 20px;
      text-align: center;
    }
    
    .load-more-btn {
      padding: 10px 25px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background-color: var(--white);
      color: var(--secondary);
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .goods-name {
        font-size: 13px;
      }
      
      .goods-image {
        height: 100px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择积分兑换样式</div>
    <div class="switcher-option active" data-style="1">科技蓝</div>
    <div class="switcher-option" data-style="2">时尚粉</div>
    <div class="switcher-option" data-style="3">商务紫</div>
    <div class="switcher-option" data-style="4">清新蓝</div>
    <div class="switcher-option" data-style="5">活力绿</div>
    <div class="switcher-option" data-style="6">暗黑灰</div>
  </div>
  
  <div class="container">
    <!-- 风格1：科技蓝 -->
    <div class="exchange-page active" id="page1">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">积分兑换中心</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-bell-o"></i></button>
          <button class="header-btn"><i class="fa fa-user-o"></i></button>
        </div>
      </div>
      
      <div class="points-info">
        <div class="points-balance">
          <span class="points-label">我的积分</span>
          <span class="points-amount">25,680 积分</span>
        </div>
        <a href="#" class="recharge-link">积分充值 <i class="fa fa-arrow-right"></i></a>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索兑换商品...">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部商品</div>
        <div class="tab-item">热门兑换</div>
        <div class="tab-item">虚拟物品</div>
        <div class="tab-item">实物商品</div>
        <div class="tab-item">新品上线</div>
      </div>
      
      <div class="goods-list">
        <h3 class="section-title">热门推荐</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <div class="tag hot">热门</div>
            <img src="https://picsum.photos/id/26/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">月度会员特权</div>
              <div class="goods-points">5,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/96/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">定制版马克杯</div>
              <div class="goods-points">8,500 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <div class="tag new">新品</div>
            <img src="https://picsum.photos/id/20/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">100元购物券</div>
              <div class="goods-points">10,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/119/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">专属表情包</div>
              <div class="goods-points">1,200 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <h3 class="section-title">虚拟物品</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <img src="https://picsum.photos/id/160/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">高级会员(季度)</div>
              <div class="goods-points">12,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/169/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">专属头像框</div>
              <div class="goods-points">3,500 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/175/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">特权标识</div>
              <div class="goods-points">6,800 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/235/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">积分加速卡</div>
              <div class="goods-points">2,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <div class="load-more">
          <button class="load-more-btn">加载更多商品</button>
        </div>
      </div>
    </div>
    
    <!-- 风格2：时尚粉 -->
    <div class="exchange-page" id="page2">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">积分商城</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-heart-o"></i></button>
        </div>
      </div>
      
      <div class="points-info">
        <div class="points-balance">
          <span class="points-label">我的积分</span>
          <span class="points-amount">18,350 积分</span>
        </div>
        <a href="#" class="recharge-link">去充值 <i class="fa fa-plus-circle"></i></a>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索想要的商品...">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部</div>
        <div class="tab-item">美妆护肤</div>
        <div class="tab-item">时尚配饰</div>
        <div class="tab-item">数码产品</div>
        <div class="tab-item">生活家居</div>
      </div>
      
      <div class="goods-list">
        <h3 class="section-title">精选好物</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <div class="tag hot">热抢</div>
            <img src="https://picsum.photos/id/64/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">丝绒哑光口红套装</div>
              <div class="goods-points">15,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/65/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">轻奢设计项链</div>
              <div class="goods-points">22,500 积分</div>
              <button class="exchange-btn disabled">积分不足</button>
            </div>
          </div>
          
          <div class="goods-item">
            <div class="tag new">新品</div>
            <img src="https://picsum.photos/id/76/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">保湿精华液</div>
              <div class="goods-points">18,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/91/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">时尚太阳镜</div>
              <div class="goods-points">12,800 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <h3 class="section-title">限量秒杀</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <div class="tag limited">限量</div>
            <img src="https://picsum.photos/id/106/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">香水小样套装</div>
              <div class="goods-points">9,900 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <div class="tag limited">限量</div>
            <img src="https://picsum.photos/id/111/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">精致化妆镜</div>
              <div class="goods-points">5,500 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <div class="load-more">
          <button class="load-more-btn">查看更多</button>
        </div>
      </div>
    </div>
    
    <!-- 风格3：商务紫 -->
    <div class="exchange-page" id="page3">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">企业积分兑换</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-cog"></i></button>
        </div>
      </div>
      
      <div class="points-info">
        <div class="points-balance">
          <span class="points-label">企业积分余额</span>
          <span class="points-amount">56,800 积分</span>
        </div>
        <a href="#" class="recharge-link">批量充值</a>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索商务礼品...">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部礼品</div>
        <div class="tab-item">商务办公</div>
        <div class="tab-item">客户回馈</div>
        <div class="tab-item">员工福利</div>
        <div class="tab-item">高端定制</div>
      </div>
      
      <div class="goods-list">
        <h3 class="section-title">商务优选</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <img src="https://picsum.photos/id/180/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">商务笔记本套装</div>
              <div class="goods-points">8,600 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/160/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">智能手环</div>
              <div class="goods-points">15,800 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <div class="tag new">新品</div>
            <img src="https://picsum.photos/id/119/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">定制钢笔礼盒</div>
              <div class="goods-points">12,500 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/201/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">高端茶具套装</div>
              <div class="goods-points">28,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <h3 class="section-title">员工福利</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <img src="https://picsum.photos/id/225/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">超市购物卡</div>
              <div class="goods-points">20,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/235/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">体检套餐</div>
              <div class="goods-points">35,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <div class="load-more">
          <button class="load-more-btn">加载更多</button>
        </div>
      </div>
    </div>
    
    <!-- 风格4：清新蓝 -->
    <div class="exchange-page" id="page4">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">积分兑换</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-history"></i></button>
        </div>
      </div>
      
      <div class="points-info">
        <div class="points-balance">
          <span class="points-label">当前积分</span>
          <span class="points-amount">9,420 积分</span>
        </div>
        <a href="#" class="recharge-link">赚积分</a>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索商品">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部</div>
        <div class="tab-item">影视会员</div>
        <div class="tab-item">美食券</div>
        <div class="tab-item">出行服务</div>
        <div class="tab-item">游戏道具</div>
      </div>
      
      <div class="goods-list">
        <h3 class="section-title">数字商品</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <img src="https://picsum.photos/id/160/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">视频网站月卡</div>
              <div class="goods-points">3,500 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/292/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">音乐会员季卡</div>
              <div class="goods-points">5,800 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/225/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">50元外卖券</div>
              <div class="goods-points">6,000 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/237/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">打车优惠券包</div>
              <div class="goods-points">2,200 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <h3 class="section-title">热门推荐</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <div class="tag hot">热门</div>
            <img src="https://picsum.photos/id/24/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">云存储扩容</div>
              <div class="goods-points">4,000 积分/年</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/201/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">游戏皮肤</div>
              <div class="goods-points">7,500 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <div class="load-more">
          <button class="load-more-btn">查看更多</button>
        </div>
      </div>
    </div>
    
    <!-- 风格5：活力绿 -->
    <div class="exchange-page" id="page5">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">绿色积分商城</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-leaf"></i></button>
        </div>
      </div>
      
      <div class="points-info">
        <div class="points-balance">
          <span class="points-label">我的绿色积分</span>
          <span class="points-amount">12,750 积分</span>
        </div>
        <a href="#" class="recharge-link">获取积分</a>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索环保商品...">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部商品</div>
        <div class="tab-item">环保家居</div>
        <div class="tab-item">有机食品</div>
        <div class="tab-item">公益捐赠</div>
        <div class="tab-item">低碳出行</div>
      </div>
      
      <div class="goods-list">
        <h3 class="section-title">环保精选</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <img src="https://picsum.photos/id/292/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">竹制餐具套装</div>
              <div class="goods-points">4,200 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/131/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">有机棉购物袋</div>
              <div class="goods-points">2,800 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <div class="tag new">新品</div>
            <img src="https://picsum.photos/id/175/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">太阳能充电宝</div>
              <div class="goods-points">9,500 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/201/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">环保清洁套装</div>
              <div class="goods-points">5,600 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <h3 class="section-title">公益捐赠</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <img src="https://picsum.photos/id/111/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">植树捐赠</div>
              <div class="goods-points">3,000 积分/棵</div>
              <button class="exchange-btn">立即捐赠</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/133/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">海洋保护</div>
              <div class="goods-points">5,000 积分</div>
              <button class="exchange-btn">立即捐赠</button>
            </div>
          </div>
        </div>
        
        <div class="load-more">
          <button class="load-more-btn">加载更多</button>
        </div>
      </div>
    </div>
    
    <!-- 风格6：暗黑灰 -->
    <div class="exchange-page" id="page6">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">积分兑换中心</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-trophy"></i></button>
          <button class="header-btn"><i class="fa fa-cog"></i></button>
        </div>
      </div>
      
      <div class="points-info">
        <div class="points-balance">
          <span class="points-label">可用积分</span>
          <span class="points-amount">32,480 积分</span>
        </div>
        <a href="#" class="recharge-link">充值 <i class="fa fa-arrow-right"></i></a>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索商品...">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部</div>
        <div class="tab-item">会员特权</div>
        <div class="tab-item">数字商品</div>
        <div class="tab-item">实体商品</div>
        <div class="tab-item">专属福利</div>
      </div>
      
      <div class="goods-list">
        <h3 class="section-title">会员专享</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <div class="tag hot">爆款</div>
            <img src="https://picsum.photos/id/160/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">年度黑卡会员</div>
              <div class="goods-points">29,800 积分</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/169/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">专属客服</div>
              <div class="goods-points">8,000 积分/月</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/201/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">无广告体验</div>
              <div class="goods-points">5,000 积分/月</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
          
          <div class="goods-item">
            <div class="tag new">新功能</div>
            <img src="https://picsum.photos/id/237/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">AI助手</div>
              <div class="goods-points">12,000 积分/月</div>
              <button class="exchange-btn">立即兑换</button>
            </div>
          </div>
        </div>
        
        <h3 class="section-title">精选礼品</h3>
        <div class="goods-grid">
          <div class="goods-item">
            <img src="https://picsum.photos/id/225/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">无线耳机</div>
              <div class="goods-points">35,000 积分</div>
              <button class="exchange-btn disabled">积分不足</button>
            </div>
          </div>
          
          <div class="goods-item">
            <img src="https://picsum.photos/id/96/300/300" alt="商品图片" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">智能手表</div>
              <div class="goods-points">45,000 积分</div>
              <button class="exchange-btn disabled">积分不足</button>
            </div>
          </div>
        </div>
        
        <div class="load-more">
          <button class="load-more-btn">加载更多</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const exchangePages = {
      1: document.getElementById('page1'),
      2: document.getElementById('page2'),
      3: document.getElementById('page3'),
      4: document.getElementById('page4'),
      5: document.getElementById('page5'),
      6: document.getElementById('page6')
    };
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 初始化标签切换
      initTabs();
      
      // 初始化兑换按钮
      initExchangeButtons();
      
      // 初始化加载更多
      initLoadMore();
    }
    
    // 初始化标签切换功能
    function initTabs() {
      document.querySelectorAll('.tab-item').forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除同组所有标签的active类
          const tabContainer = this.parentElement;
          tabContainer.querySelectorAll('.tab-item').forEach(item => {
            item.classList.remove('active');
          });
          
          // 给当前点击的标签添加active类
          this.classList.add('active');
        });
      });
    }
    
    // 初始化兑换按钮功能
    function initExchangeButtons() {
      document.querySelectorAll('.exchange-btn:not(.disabled)').forEach(button => {
        button.addEventListener('click', function() {
          const goodsName = this.closest('.goods-item').querySelector('.goods-name').textContent;
          const points = this.closest('.goods-item').querySelector('.goods-points').textContent;
          
          if (confirm(`确定要兑换 ${goodsName} (${points}) 吗？`)) {
            alert('兑换成功！您的商品将尽快发放。');
          }
        });
      });
    }
    
    // 初始化加载更多
    function initLoadMore() {
      document.querySelectorAll('.load-more-btn').forEach(button => {
        button.addEventListener('click', function() {
          this.textContent = '加载中...';
          
          // 模拟加载延迟
          setTimeout(() => {
            this.textContent = '没有更多商品了';
            this.disabled = true;
            this.style.opacity = '0.7';
          }, 1500);
        });
      });
    }
    
    // 关闭所有页面
    function closeAllPages() {
      Object.values(exchangePages).forEach(page => {
        page.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 显示对应页面
      closeAllPages();
      exchangePages[style].classList.add('active');
      
      // 重置加载更多按钮状态
      resetLoadMoreButtons();
    }
    
    // 重置加载更多按钮
    function resetLoadMoreButtons() {
      document.querySelectorAll('.load-more-btn').forEach(button => {
        button.textContent = '加载更多商品';
        button.disabled = false;
        button.style.opacity = '1';
      });
    }
    
    // 键盘导航
    document.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowLeft') {
        let prev = currentStyle - 1;
        if (prev < 1) prev = 6;
        switchStyle(prev);
      } else if (e.key === 'ArrowRight') {
        let next = currentStyle + 1;
        if (next > 6) next = 1;
        switchStyle(next);
      }
    });
    
    // 启动
    init();
  </script>
</body>
</html>
